<template>
  <view>
    <view
      v-if="!modal"
      class="order-time"
      @tap="showCalendar()"
    >
      <view
        v-if="singleDate"
        class="time-viewer"
      >
        {{ choiceDate[0].year }}年{{ choiceDate[0].month }}月{{ choiceDate[0].day }}日
      </view>
      <view
        v-else
        class="time-viewer"
      >
        <text class="goInHotel">
          起租
        </text>
        <text class="date-wrappper">
          {{ choiceDate[0].month }}月{{ choiceDate[0].day }}日
        </text>
        <text
          v-if="choiceDate[0].year + '' + choiceDate[0].month + '' + choiceDate[0].day == today"
          class="goInHotel2"
        >
          今天
        </text>
        <text class="left-hotel">
          结束
        </text>
        <text class="date-wrappper">
          {{ choiceDate[1].month }}月{{ choiceDate[1].day }}日
        </text>
        <text
          v-if="choiceDate[choiceDate.length - 1].year + '' + choiceDate[choiceDate.length - 1].month + '' + choiceDate[choiceDate.length - 1].day == tomorrow"
          class="goInHotel2"
        >
          明天
        </text>
        <text class="sumCount">
          {{ dayCount2 }}
        </text>
      </view>
    </view>

    <view
      class="calendar-layer"
      :animation="animationData"
      :class="isShow_H5 ? 'show' : 'hide'"
    >
      <!-- 遮罩层 -->
      <view
        class="layer-white-space"
        @tap="hideCalendar(false)"
      />

      <view
        class="layer-content"
        :class="{ choiceDate: choice === true || singleDate }"
      >
        <view class="layer-header">
          <view
            class="layer-close"
            @tap="hideCalendar(false)"
          />
          <text class="layer-title">
            选择日期
          </text>
        </view>
        <!--  -->
        <view class="layer-body">
          <view class="week-box">
            <text
              v-for="(item, tmpIndex) in weekNameArr"
              :key="tmpIndex"
              class="week-box-item"
            >
              {{ item }}
            </text>
          </view>
          <!--  -->
          <scroll-view
            class="layer-list"
            scroll-y="true"
          >
            <view
              v-for="(monthData, index) in date"
              :key="index"
              class="month"
            >
              <view
                class="month-title"
                :class="'m-' + monthData[0].year + '-' + monthData[0].month"
                :style="'z-index:' + index"
              >
                {{ monthData[0].year + '年' + monthData[0].month + '月' }}
              </view>
              <view class="month-content">
                <view
                  v-for="(data, index2) in monthData"
                  :key="index2"
                  class="day"
                  :data-index="index"
                  :data-indexs="index2"
                  :class="
                    data.re < today
                      ? 'disabled'
                      : data.selected
                        ? 'active' + (data.date == choiceDate[0].date ? ' begin' : data.date == choiceDate[1].date ? ' end' : '')
                        : ''
                  "
                  :style="index2 == 0 ? 'margin-left:' + weeks[index] * (100 / 7) + '%' : ''"
                  @tap="dayClick"
                >
                  <view class="day-content">
                    <!-- <text class="day-subject">{{ data.week }}</text> -->

                    <text
                      v-if="getDayType(data) === '假'"
                      class="day-subject holiday"
                    >
                      {{ getDayType(data) }}
                    </text>
                    <text
                      v-else-if="getDayType(data) === '班'"
                      class="day-subject workday"
                    >
                      {{ getDayType(data) }}
                    </text>
                    <text
                      v-else
                      class="day-subject"
                    >
                      {{ getDayType(data) }}
                    </text>

                    <text class="day-txt">
                      {{ getDayName(monthData[0].year, data) }}
                    </text>

                    <text
                      v-if="!singleDate"
                      class="day-tip"
                    >
                      {{ data.act.tip }}
                    </text>
                  </view>
                  <view
                    v-if="choice === false && !singleDate"
                    class="beginTip"
                  >
                    请选择结束日期
                  </view>
                  <view
                    v-if="choice"
                    class="endTip"
                  >
                    {{ dayCount2 }}
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <!--  -->
        <view class="layer-footer">
          <view
            v-if="choice === true || singleDate"
            class="submitBtn"
            @tap="submitbtn"
          >
            完成
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    startDate: {
      type: String,
      default: ''
    },
    endDate: {
      type: String,
      default: ''
    },
    modal: {
      type: Boolean,
      default: false // 默认为有界面的
    },
    show: {
      type: Boolean,
      default: false // 默认不显示
    },
    daysCount: {
      type: Number,
      default: 150 // 默认显示150天
    },
    singleDate: {
      type: Boolean,
      default: false // 默认为false
    }
  },
  data () {
    return {
      date: [],
      weeks: [],
      dayCount: 1,
      dayCount2: '共1天',
      festival: {
        '0101': '元旦',
        '0214': '情人节',
        '0308': '妇女节',
        '0312': '植树节',
        '0315': '消费者权益日',
        '0401': '愚人节',
        '0405': '清明节',
        '0501': '劳动节',
        '0504': '青年节',
        '0512': '护士节',
        '0601': '儿童节',
        '0701': '建党节',
        '0801': '建军节',
        '0910': '教师节',
        '0928': '孔子诞辰',
        1001: '国庆节',
        1006: '老人节',
        1024: '联合国日',
        1224: '平安夜',
        1225: '圣诞节'
      },
      holidayList: {
        y2020: {
          holidayName: {
            '0101': '元旦',
            '0124': '除夕',
            '0125': '春节',
            '0404': '清明',
            '0501': '劳动',
            '0625': '端午',
            1001: '国庆'
          },
          holiday: {
            // 元旦
            '0101': true,
            // 春节
            '0124': true,
            '0125': true,
            '0126': true,
            '0127': true,
            '0128': true,
            '0129': true,
            '0130': true,
            // 清明
            '0404': true,
            '0405': true,
            '0406': true,
            // 劳动
            '0501': true,
            '0502': true,
            '0503': true,
            '0504': true,
            '0505': true,
            // 端午
            '0625': true,
            '0626': true,
            '0627': true,
            // 中秋 国庆
            1001: true,
            1002: true,
            1003: true,
            1004: true,
            1005: true,
            1006: true,
            1007: true,
            1008: true
          },
          workday: { '0119': true, '0201': true, '0426': true, '0509': true, '0628': true, '0927': true, 1010: true }
        },
        y2021: {
          holidayName: {},
          holiday: {},
          workday: {}
        }
      },
      haveOrder: [],
      dateFlag: {},
      choice: '',
      today: '',
      choiceDate: [],
      choiceDateArr: [],
      tomorrow: '',
      afterTomorrow: '',
      weekNameArr: ['日', '一', '二', '三', '四', '五', '六'],
      animation: null,
      animationData: null,
      curScrollTop: 0,
      monthTitleRectList: [],
      fixedId: '',
      layerTop: 0,
      // 用来重置的
      bak_date: [],
      bak_weeks: [],
      bak_choiceDate: [],
      bak_choiceDateArr: [],
      bak_dayCount: 1,
      isShow_H5: '', // 用于表示H5平台显示隐藏状态
      isShow_NoH5: false, // 用于表示非H5平台显示隐藏状态
      tmpWeekArr: {} // 临时数组
    }
  },
  watch: {
    show: function (newVal, oldVal) {
      this.isShow_NoH5 ? this.hideCalendar() : this.showCalendar()
    },
    startDate: function (newVal, oldVal) {
      console.log('--startDate')
      this.dateData()
    },
    endDate: function (newVal, oldVal) {
      console.log('--endDate')
      this.dateData()
    }
  },
  created () {
    this.init()
  },
  onLoad () {
    this.init()
  },
  methods: {
    // 补0
    pad (num, n) {
      return Array(n - ('' + num).length + 1).join(0) + num
    },
    init () {
      // console.log(this.startDate, this.endDate);

      // #ifndef H5
      // 弹出层动画创建
      this.animation = uni.createAnimation({
        duration: 400, // 整个动画过程花费的时间，单位为毫秒
        timingFunction: 'ease', // 动画的类型
        delay: 0 // 动画延迟参数
      })
      // #endif

      this.dateData()

      if (this.modal) {
        // 如果是弹窗模式，那么初始时就派发change事件
        this.$emit('change', {
          choiceDate: this.choiceDate,
          dayCount: this.dayCount
        })
      }
    },
    getDayType (data) {
      return data.re != this.today && data.re != this.tomorrow && data.re != this.afterTomorrow ? data.act.subject : ''
    },
    getDayName (year, data) {
      let name = data.day
      const yearData = this.holidayList['y' + year] || {}
      const holidayName = yearData.holidayName || ''
      const monthAndDay = data.month + '' + data.day
      if (holidayName[monthAndDay]) {
        name = holidayName[monthAndDay]
      } else if (data.re == this.today) {
        name = '今天'
      } else if (data.re == this.tomorrow) {
        name = '明天'
      } else if (data.re == this.afterTomorrow) {
        name = '后天'
      }
      return name
    },
    isHoliday (year, day) {
      // 判断是否为法定节假日
      const yearData = this.holidayList['y' + year]
      let result = false
      if (yearData) {
        const holiday = yearData.holiday
        result = holiday[day]
      }
      return result ? '假' : ''
    },
    isWorkday (year, day) {
      // 判断是否要补班
      const yearData = this.holidayList['y' + year]
      let result = false
      if (yearData) {
        const workday = yearData.workday
        result = workday[day]
      }
      return result ? '班' : ''
    },
    getLayerTop: function () {
      return new Promise(resolve => {
        // 获取layer-list窗器的top
        const view2 = uni.createSelectorQuery().select('.layer-list')
        view2
          .boundingClientRect(data => {
            resolve(data.top)
          })
          .exec()
      })
    },
    getMonthTitleRectList: function () {
      return new Promise(resolve => {
        // 获取每个月的文字头的top
        const view = uni.createSelectorQuery().selectAll('.month-title')
        view.boundingClientRect(data => {
          resolve(data)
        }).exec()
      })
    },
    getRectList: async function () {
      if (!this.layerTop || this.layerTop < 0) this.layerTop = await this.getLayerTop()
      let isInitRectData = true
      if (this.monthTitleRectList && this.monthTitleRectList.length > 0) {
        if (this.monthTitleRectList[0].top == 0) {
          this.monthTitleRectList = await this.getMonthTitleRectList()
          isInitRectData = false
        }
      } else {
        isInitRectData = false
      }
      if (isInitRectData == false) this.monthTitleRectList = await this.getMonthTitleRectList()
    },
    showCalendar: function () {
      // 存储未更新前的数据
      this.bak_date = JSON.parse(JSON.stringify(this.date))
      this.bak_weeks = JSON.parse(JSON.stringify(this.weeks))
      this.bak_choiceDate = JSON.parse(JSON.stringify(this.choiceDate))
      this.bak_choiceDateArr = JSON.parse(JSON.stringify(this.choiceDateArr))
      this.bak_dayCount = this.dayCount

      /// ////////////////非非非h5平台适配//////////////////
      // #ifndef H5
      // 设置动画内容为：使用绝对定位显示区域，高度变为100%
      this.animation
        .bottom('0px')
        .height('100%')
        .step()
      this.animationData = this.animation.export()
      this.isShow_NoH5 = true
      // #endif

      /// ////////////////h5平台适配//////////////////
      // #ifdef H5
      this.isShow_H5 = true
      // #endif
    },
    hideCalendar: function (isBtnClick) {
      /// ////////////////非非非h5平台适配//////////////////
      // #ifndef H5
      // 设置动画内容为：使用绝对定位隐藏整个区域，高度变为0
      this.animation
        .bottom('-100%')
        .height('0upx')
        .step()
      this.animationData = this.animation.export()
      this.isShow_NoH5 = false
      // #endif

      /// ////////////////h5平台适配//////////////////
      // #ifdef H5
      this.isShow_H5 = false
      // #endif

      // SubmitisBtnClick判断是否为按钮点击
      if (isBtnClick) return

      // 非按钮点击则重置已选择的
      this.dateFlag = {}
      // this.choice = '';
      this.dayCount = this.bak_dayCount
      this.dayCount2 = '共' + this.dayCount + '天'
      //
      this.date = JSON.parse(JSON.stringify(this.bak_date))
      this.weeks = JSON.parse(JSON.stringify(this.bak_weeks))
      this.choiceDate = JSON.parse(JSON.stringify(this.bak_choiceDate))
      this.choiceDateArr = JSON.parse(JSON.stringify(this.bak_choiceDateArr))
      // console.log('h 4');
    },
    setData: function (obj) {
      const that = this
      let keys = []
      let val, data
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.')
        val = obj[key]
        data = that.$data
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val)
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {})
            }
          }
          data = data[key2]
        })
      })
    },
    onScroll: function (e) {
      /// ///暂时还有问题，效率也不太好，等后缀再优化
      // <scroll-view class='layer-list' scroll-y="true" @scroll="onScroll">
      // <view v-for="(monthData,index) in date" :key="index" class="month" :class="fixedId == ('m-' + monthData[0].year + '-' + monthData[0].month) ? 'fixed' : ''">
      //
      // this.getRectList();
      //
      // let scorllTop = e.detail.scrollTop;
      // this.curScrollTop = scorllTop + this.layerTop;
      //
      // ///////////////////////////////////////////
      // this.monthTitleRectList.forEach((item, i) => {
      // 	if (this.curScrollTop > item.top - 70) {
      // 		this.fixedId = item.id;
      // 		///////////这里理应需要 节流 和 return，后面再处理/////////////
      // 	}
      // });
    },
    dateData: function () {
      const dataAll = [] // 总日历数据
      const dataAll2 = [] // 总日历数据
      let dataMonth = [] // 月日历数据
      const date = new Date() // 当前日期
      const getDateTime = date.getTime()
      const year = date.getFullYear() // 当前年
      const week = date.getDay() // 当天星期几
      const weeks = []
      const month = date.getMonth() + 1 // 当前月份
      const day = date.getDate() // 当天
      let daysCount = Math.min(this.daysCount, 60) // 一共显示多少天
      daysCount = Math.min(this.daysCount, 360) // 最小60天，最大360天
      daysCount += day
      let dayscNow = 0 // 计数器
      const monthList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] // 月份列表
      const nowMonthList = [] // 本年剩余年份
      this.today = '' + year + '-' + this.pad(month, 2) + '-' + this.pad(day, 2)
      this.tomorrow = '' + year + '-' + this.pad(month, 2) + '-' + this.pad(day + 1, 2)
      this.afterTomorrow = '' + year + '-' + this.pad(month, 2) + '-' + this.pad(day + 2, 2)

      /// ////////////配置初始日期/////////////////
      // ios上不支持-连接的日期时间，所以需要替换-为/
      let startDate = this.startDate
      let endDate = this.endDate
      if (startDate) {
        startDate = new Date(startDate.split('-').join('/'))
        // 如果起始时间小于当前时间，那么，超始时间就是当前时间，这里也不考虑分秒，所以这里简单处理。
        if (startDate.getTime() < getDateTime) startDate = new Date()
      } else {
        startDate = new Date()
      }

      if (endDate) {
        endDate = new Date(this.endDate.split('-').join('/'))
        if (endDate.getTime() < getDateTime) endDate = new Date(startDate.getTime() + 24 * 3600 * 1000)
      } else {
        endDate = new Date(startDate.getTime() + 24 * 3600 * 1000)
      }

      // 判断开始时间是否大于结束时间，大于则互换
      if (startDate.getTime() > endDate.getTime()) [startDate, endDate] = [endDate, startDate]

      const maxDate = new Date(getDateTime + daysCount * 24 * 3600 * 1000)
      if (endDate.getTime() > maxDate.getTime()) {
        const millisecond = endDate.getTime() - maxDate.getTime()
        // 如果结束时间大于
        daysCount += parseInt(millisecond / (24 * 3600 * 1000)) + 7
        console.log('这里需要显示的天数', daysCount)
      }
      /// ////////////配置初始日期/////////////////

      for (let i = month; i < 13; i++) {
        nowMonthList.push(i)
      }
      const yearList = [year] // 年份最大可能
      for (let i = 0; i < daysCount / 365 + 2; i++) {
        yearList.push(year + i + 1)
      }
      const leapYear = function (Year) {
        // 判断是否闰年
        if ((Year % 4 == 0 && Year % 100 != 0) || Year % 400 == 0) {
          return true
        } else {
          return false
        }
      }
      for (let i = 0; i < yearList.length; i++) {
        // 遍历年
        let mList
        if (yearList[i] == year) {
          // 判断当前年份
          mList = nowMonthList
        } else {
          mList = monthList
        }
        for (let j = 0; j < mList.length; j++) {
          // 循环月份
          dataMonth = []
          let t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
          const t_days_thisYear = []
          if (yearList[i] == year) {
            for (let m = 0; m < nowMonthList.length; m++) {
              t_days_thisYear.push(t_days[mList[m] - 1])
            }
            t_days = t_days_thisYear
          } else {
            t_days = [31, 28 + leapYear(yearList[i]), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
          }

          for (let k = 0; k < t_days[j]; k++) {
            // 循环每天
            dayscNow++
            let nowData
            if (dayscNow < daysCount) {
              // 如果计数器没满
              const days = this.pad(k + 1, 2)

              const monthAndDay = this.pad(mList[j], 2) + '' + days

              // var subject = this.festival[monthAndDay];
              const subject = this.isHoliday(yearList[i], monthAndDay) || this.isWorkday(yearList[i], monthAndDay) || ''

              const none = false
              const newDateFormate = new Date(yearList[i] + '/' + mList[j] + '/' + (k + 1))
              const thisDateTime = newDateFormate.getTime()
              const selected = 0
              if (yearList[i] == year && mList[j] == month) {
                // 判断当年当月
                // if (k + 1 >= day) {
                // if (k + 1 == day) {
                if (k == 0) {
                  const date = new Date(yearList[i] + '/' + mList[j] + '/' + (k + 1))
                  const weekss = date.getDay() // 获取每个月第一天是周几
                  weeks.push(weekss)
                }
                nowData = {
                  year: yearList[i],
                  month: this.pad(mList[j], 2),
                  act: {
                    subject: subject || '',
                    none,
                    tip: '',
                    defaultStr: 0
                  },
                  day: this.pad(k + 1, 2),
                  date: yearList[i] + '' + this.pad(mList[j], 2) + days,
                  selected,
                  re: yearList[i] + '-' + this.pad(mList[j], 2) + '-' + days,
                  dateTime: thisDateTime,
                  week: this.getWeek(weeks, month, year, yearList[i], mList[j], k + 1)
                }
                dataMonth.push(nowData)
                // }
              } else {
                if (k == 0) {
                  const date = new Date(yearList[i] + '/' + mList[j] + '/' + (k + 1))
                  const weekss = date.getDay() // 获取每个月第一天是周几
                  weeks.push(weekss)
                }
                // 其他情况
                nowData = {
                  year: yearList[i],
                  month: this.pad(mList[j], 2),
                  act: {
                    subject: subject || '',
                    none,
                    tip: '',
                    defaultStr: 0
                  },
                  day: this.pad(k + 1, 2),
                  date: yearList[i] + '' + this.pad(mList[j], 2) + days,
                  selected,
                  re: yearList[i] + '-' + this.pad(mList[j], 2) + '-' + days,
                  dateTime: thisDateTime,
                  week: this.getWeek(weeks, month, year, yearList[i], mList[j], k + 1)
                }
                dataMonth.push(nowData)
              }
            } else {
              break
            }
          }
          dataAll.push(dataMonth)
        }
      }
      for (let i = 0; i < dataAll.length; i++) {
        if (dataAll[i].length != 0) {
          dataAll2.push(dataAll[i])
        }
      }

      //
      const start_year = startDate.getFullYear()
      const start_month = startDate.getMonth() + 1
      const start_day = startDate.getDate()
      //
      const end_year = endDate.getFullYear()
      const end_month = endDate.getMonth() + 1
      const end_day = endDate.getDate()

      // 当前选中的起始时间坐标
      const startIndex1 = start_year == year ? start_month - month : start_month + (12 - month)
      const startIndex2 = start_day - 1

      // 当前选中的结束时间坐标
      const endIndex1 = end_year == year ? end_month - month : end_month + (12 - month)
      const endIndex2 = end_day - 1
      //
      dataAll2[startIndex1][startIndex2].selected = 1
      dataAll2[startIndex1][startIndex2].act.tip = '起租'
      dataAll2[startIndex1][startIndex2].act.defaultStr = 1
      this.choiceDate.push(dataAll2[startIndex1][startIndex2])

      let islastDay = false // 是否为一个月最后一天，且结束日期是下月第一天
      if (startIndex1 == endIndex1 && endIndex2 - startIndex2 == 1) {
        if (dataAll2[startIndex1][startIndex2 + 1]) {
          dataAll2[startIndex1][startIndex2 + 1].selected = 1
          dataAll2[startIndex1][startIndex2 + 1].act.tip = '结束'
          dataAll2[startIndex1][startIndex2 + 1].act.defaultStr = 1
          this.choiceDate.push(dataAll2[startIndex1][startIndex2 + 1])
        } else {
          islastDay = true
        }
      } else {
        islastDay = true
      }

      if (islastDay) {
        dataAll2[endIndex1][endIndex2].selected = 1
        dataAll2[endIndex1][endIndex2].act.tip = '结束'
        dataAll2[endIndex1][endIndex2].act.defaultStr = 1
        this.choiceDate.push(dataAll2[endIndex1][endIndex2])
      }

      // 选择日期 //nextTick()居然app和其他平台表现不一，换回setTimeout
      setTimeout(() => {
        this.selectday(startIndex1, startIndex2)
        this.selectday(endIndex1, endIndex2)
      })

      // console.log(dataAll2, weeks, this.today, this.tomorrow, this.afterTomorrow, this.choiceDate);
      this.date = dataAll2
      this.weeks = weeks
      this.choiceDate = this.choiceDate
      this.choiceDateArr = this.choiceDate
      // console.log(this.choiceDate);
    },
    getWeek (weeks, firstMonth, thisYear, curYear, curMonth, day) {
      /**
			 * 获取周几
			 * weeks 每个月第一天周几
			 * firstMonth 当前第一个月是哪个月
			 * thisYear 今年的年份
			 * curYear 当前要取的是哪一年
			 * curMonth 当前要取的是哪个月
			 * day 要取哪一天的星期
			 */
      // 注：这里取的是每月第一天的星期几，但是因为现在只从今天展示，所以第一个月的第一天的星期几是今天的星期几，而不会是1号的星期天。

      // 搞定不是本年的月份的星期的问题
      let monthIndex = 0
      if (curYear > thisYear) {
        monthIndex = (curYear - thisYear) * 12 + curMonth - firstMonth
      } else {
        monthIndex = curMonth - firstMonth
      }

      const firstDayWeek = weeks[monthIndex]
      const key = curYear + '-' + curMonth
      if (!this.tmpWeekArr[key]) {
        let tmpArr = []
        for (let i = firstDayWeek; i < this.weekNameArr.length; i++) {
          tmpArr.push(this.weekNameArr[i])
        }
        tmpArr = [...tmpArr, ...this.weekNameArr]
        // 缓存一下，就不必每次再取了
        this.tmpWeekArr[key] = tmpArr
      }
      let index = day % 7 || 7
      // if (curMonth == firstMonth) {
      // 	index += firstDayWeek + 1;
      // } else {
      index--
      // }
      return this.tmpWeekArr[key][index]
    },
    dayClick: function (e) {
      const indexs = e.currentTarget.dataset.indexs
      const index = e.currentTarget.dataset.index
      // console.log('selectday ', indexs, index);
      this.selectday(index, indexs, true)
    },
    selectday: function (index, indexs, isUserClick) {
      // console.log("001", this.dateFlag, isUserClick)
      // 单个日期
      if (this.singleDate) {
        if (!isUserClick && JSON.stringify(this.dateFlag) != '{}') {
          return
        }
        this.dateFlag = {}
      }
      // console.log("002", indexs)
      if (indexs == -1) {
        return
      }
      const curDate = this.date[index][indexs]
      if (curDate.re < this.today) {
        // 如果是用户点击今天之前的日期的话，就返回
        if (isUserClick) return
      }
      // console.log("003", indexs)

      curDate.selected = 1
      curDate.act.tip = '起租'
      if (this.dateFlag.date && curDate.dateTime < this.dateFlag.date.dateTime) {
        console.log('004')
        const flagIndex = this.dateFlag.index
        const flagIndexs = this.dateFlag.indexs
        this.date[flagIndex][flagIndexs].selected = 0
        this.date[flagIndex][flagIndexs].act.tip = ''
        this.dateFlag = {
          date: curDate,
          index,
          indexs
        }
        this.choice = false
        this.dayCount = 1
        //
        this.choiceDate[0] = curDate
      } else if (this.dateFlag && this.dateFlag.date) {
        // console.log("005")
        if (this.dateFlag.index == index && this.dateFlag.indexs == indexs) {
          return
        }
        curDate.act.tip = '结束'
        //
        // console.log("00555555")
        //
        var that = this
        const dateFlagDateTime = that.dateFlag.date.dateTime
        const choiceDateTime = that.date[index][indexs].dateTime
        that.choiceDateArr = []
        that.choiceDateArr.push(that.dateFlag.date)
        let nonFlag = false
        const nonArr = []
        let count = 0
        this.date.forEach(function (dataItems) {
          dataItems.forEach(function (dataItem) {
            if (dataItem.dateTime > dateFlagDateTime && dataItem.dateTime < choiceDateTime) {
              if (dataItem.act.none) {
                nonFlag = true
                nonArr.push(dataItem.day)
              }
              that.choiceDateArr.push(dataItem)
              dataItem.selected = 1
              count++
            }
          })
        })
        that.choiceDateArr.push(that.date[index][indexs])
        // 设置开始和结果两个日期
        this.choiceDate[0] = that.choiceDateArr[0]

        this.choiceDate[1] = that.choiceDateArr[that.choiceDateArr.length - 1]
        //
        if (nonFlag) {
          var that = this
          this.date.forEach(function (dataItems) {
            dataItems.forEach(function (dataItem) {
              if (dataItem.dateTime != choiceDateTime) {
                dataItem.act.tip = ''
                dataItem.selected = 0
              } else {
                dataItem.act.tip = '起租'
              }
            })
          })
          this.dateFlag = {
            date: that.date[index][indexs],
            index,
            indexs
          }
          this.choiceDate[0] = that.date[index][indexs]
          this.dayCount = 1
          let nonstr = ''
          nonArr.forEach(function (nonitem, index) {
            if (index != nonArr.length - 1) {
              nonstr = nonstr + nonitem + '号,'
            } else {
              nonstr = nonstr + nonitem + '号'
            }
          })
          uni.showModal({
            title: '提示',
            content: `${nonstr}无房`
          })
        } else {
          this.dateFlag = {}
          this.choice = true
          // console.log('count', count);
          this.dayCount = count + 1
          this.dayCount2 = '共' + (count + 1) + '天'
        }
      } else {
        // console.log("006")
        var that = this
        this.date.forEach(function (dataItems) {
          dataItems.forEach(function (dataItem) {
            dataItem.act.defaultStr = 0
            if (dataItem.dateTime != that.date[index][indexs].dateTime) {
              dataItem.selected = 0
              dataItem.act.tip = ''
            } else {
              dataItem.act.tip = '起租'
            }
          })
        })
        this.dateFlag = {
          date: curDate,
          index,
          indexs
        }
        this.choice = false
        this.dayCount = 1
        //
        this.choiceDate[0] = curDate
        // console.log("this.choice ", this.choice)
      }
    },
    submitbtn: function () {
      this.choiceDate[0] = this.choiceDateArr[0]
      this.choiceDate[1] = this.choiceDateArr[this.choiceDateArr.length - 1]
      this.dayCount2 = '共' + this.dayCount + '天'
      this.hideCalendar(true)
      /** 派发事件
			 * 参数：
			 * 1.choiceDate 时间区间（开始时间和结束时间）
			 * 2.dayCount 共多少天
			 */
      this.$emit('change', {
        choiceDate: this.singleDate ? this.choiceDate[0] : this.choiceDate, // 如果是单个日期方式，则只导出数组第一个
        dayCount: this.dayCount
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/*
* 主题颜色请修改这里
*
* */
$themeColor: #f93f4a;

/**
 * 补班的日子的文字颜色
 */
$workdayColor: #0c978d;

/*  #ifndef  H5  */
view {
	display: flex;
}

/*  #endif  */

/*  #ifdef  H5  */
uni-view {
	display: flex;
}

/*  #endif  */

.layer-white-space {
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: #ccc;
	opacity: 0.5;
}

.layer-header {
	height: 70upx;
	align-items: center;
	position: relative;

	.layer-close {
		width: 34upx;
		height: 34upx;
		position: absolute;

		left: 25upx;
		top: 50%;
		transform: translateY(-50%);

		//
		&::before {
			content: '';
			width: 34upx;
			height: 1upx;
			background-color: $themeColor;
			position: absolute;
			top: 16upx;
			left: 0;
			transform: rotate(45deg);
		}

		&::after {
			content: '';
			width: 1upx;
			height: 34upx;
			background-color: $themeColor;
			position: absolute;
			top: 0;
			left: 16upx;
			transform: rotate(45deg);
		}
	}

	.layer-title {
		text-align: center;
		flex: 1;
		font-size: 36upx;
	}
}

.calendar-layer {
	position: fixed;
	bottom: -100%;
	left: 0;
	height: 0;
	width: 100%;
	overflow: hidden;
	z-index: 1111;

	/*  #ifdef  H5  */
	//h5使用css3动画
	&.show {
		bottom: 0;
		height: 100%;
		transition: bottom 0.4s;
	}

	//h5使用css3动画
	&.hide {
		bottom: -100%;
		height: 100%;
		transition: bottom 0.4s;
	}

	/*  #endif  */
}

.layer-content {
	position: absolute;
	height: 85%;
	bottom: 0;
	font-size: 26upx;
	flex-direction: column;
	background-color: #fff;
}

.layer-body {
	flex-direction: column;
	height: calc(100% - 70upx);
}

.layer-list {
	// position: absolute;
	// height:300upx;
	width: 100%;
	height: 100%;
	// bottom: 0upx;
	display: flex;
	flex: 1;
	flex-direction: column;
	position: relative;
}

.layer-footer {
	width: 100%;
	height: 120upx;
	align-items: center;
	justify-items: center;
	display: none;
	z-index: 11;
}

.layer-content.choiceDate {
	.layer-footer {
		display: block;
	}

	.layer-body {
		height: calc(100% - 70upx - 120upx);
	}
}

.submitBtn {
	height: 80upx;
	line-height: 80upx;
	color: #fff;
	border-radius: 10upx;
	margin: 20upx 50upx;
	justify-content: center;
	font-size: 32upx;
	// background: linear-gradient(to right, #f5504f, #f43f4f);
	background: $themeColor;
	&:active {
		transform: scale(0.98, 0.98);
	}
}

.month {
	width: 750upx;
	flex-direction: column;
	margin-bottom: 50upx;

	.month-title {
		font-size: 30upx;
		text-align: center;
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		justify-content: center;
		border-bottom: 1upx solid #ddd;
		background: #fff;
	}

	&.fixed {
		.month-title {
			position: fixed;
			top: calc(15% + 70upx + 60upx);
			z-index: 11;
		}

		&:first-child {
			padding-top: 60upx;
		}
	}

	// 		&:first-child {
	// 			.month-title {
	// 				border: 0;
	// 			}
	// 		}
	&:last-child {
		margin-bottom: 0;
	}

	.month-content {
		flex-wrap: wrap;
	}
}

.day {
	width: calc(100% / 7);
	text-align: center;
	height: 90upx;
	align-items: center;
	justify-content: center;
	position: relative;

	.day-content {
		flex-direction: column;
		line-height: 1;
	}

	.day-txt {
		width: 100%;
		height: 1.2em;
	}

	.day-tip {
		// margin-top: 5upx;
		font-size: 20upx;
		height: 1.2em;
	}

	.day-subject {
		// margin-top: 5upx;
		font-size: 14upx;
		height: 1.2em;
		&.workday {
			color: $workdayColor;
		}
		&.holiday {
			color: $themeColor;
		}
	}

	&.disabled {
		color: #ccc;
	}

	&.active {
		background: rgba($themeColor, 0.1);
	}

	.beginTip {
		display: none;
		//////////////////////////////
		/*  #ifndef  H5  */
		width: 115upx;
		margin-top: -70upx;
		/*  #endif  */
		//////////////////////////////
		/*  #ifdef  H5  */
		width: 130upx;
		margin-top: -74upx;
		/*  #endif  */
		//////////////////////////////
		position: absolute;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 5upx;
		text-align: center;
		padding: 6upx 10upx;
		font-size: 16upx;
		z-index: 33;

		&::after {
			content: '';
			position: absolute;
			/*  #ifndef  H5  */
			left: 35%;
			top: 28upx;
			border: 5upx solid transparent;
			border-top: 6upx solid rgba($color: #000000, $alpha: 0.6);
			/*  #endif  */

			/*  #ifdef  H5  */
			left: 35%;
			top: 37upx;
			border: 8upx solid transparent;
			border-top: 10upx solid rgba($color: #000000, $alpha: 0.6);
			/*  #endif  */
		}
	}

	.endTip {
		display: none;
		background: rgba($color: #000000, $alpha: 0.6);
		position: absolute;
		border-radius: 5upx;
		text-align: center;
		padding: 6upx 10upx;
		// min-width: 70upx;
		//////////////////////////////
		/*  #ifndef  H5  */
		margin-top: -70upx;
		/*  #endif  */
		//////////////////////////////
		/*  #ifdef  H5  */
		margin-top: -74upx;
		/*  #endif  */
		//////////////////////////////
		font-size: 16upx;
		left: 12%;
		z-index: 33;

		&::after {
			content: '';
			position: absolute;

			/*  #ifndef  H5  */
			left: 35%;
			top: 28upx;
			border: 5upx solid transparent;
			border-top: 6upx solid rgba($color: #000000, $alpha: 0.6);
			/*  #endif  */

			/*  #ifdef  H5  */
			left: 35%;
			top: 37upx;
			border: 8upx solid transparent;
			border-top: 10upx solid rgba($color: #000000, $alpha: 0.6);
			/*  #endif  */
		}
	}

	&.begin,
	&.end {
		background: $themeColor;
		color: #fff;
	}

	&.begin {
		border-radius: 8upx 0 0 8upx;

		.beginTip {
			display: block;
		}
	}

	&.end {
		border-radius: 0 8upx 8upx 0;

		.endTip {
			display: block;
		}
	}
}

/* ///////////////////////////////////////// */
.week-box {
	height: 60upx;
	line-height: 60upx;
	border-bottom: 1upx solid #ddd;
	background: #fff;
	position: relative;
	z-index: 11;
}

.week-box-item {
	width: calc(100% / 7);
	text-align: center;

	&:first-child,
	&:last-child {
		color: $themeColor;
	}
}

/* ///////////////////order-time////////////////////// */
.order-time {
	position: relative;
	width: 100%;
	padding: 25upx 15upx;
}

.time-viewer {
	align-items: center;
}

.order-time::after {
	position: absolute;
	content: '';
	width: 100%;
	bottom: 0;
	left: 0;
	border-top: 1upx solid #eee;
	transform-origin: 0 100%;
	transform: scaleY(0.5);
}

.goInHotel {
	margin-left: 20upx;
	font-size: 26upx;
	color: gray;
}

.goInHotel2 {
	font-size: 26upx;
	color: gray;
}

.date-wrappper {
	position: relative;
	padding: 0 10upx;
	font-size: 32upx;
	color: black;
}

.left-hotel {
	margin-left: 40upx;
	font-size: 26upx;
	color: gray;
}

.order-time .sumCount {
	color: #6495ed;
	float: right;
	margin-right: 15upx;
	font-size: 26upx;
}
</style>
